<!-- home -->
<template>
  <div class="container">
    <van-form @submit="onSubmit" :readonly="!isEdit">
      <van-field
        v-model="query.name"
        name="name"
        :required="isEdit"
        label="商户姓名"
        :placeholder="isEdit ? '请输入商户姓名' : ''"
        clearable
        :rules="[{ required: true, message: '请输入商户姓名' }]"
      />
      <van-field
        v-model="query.deputy"
        name="deputy"
        :required="isEdit"
        label="代表名称"
        :placeholder="isEdit ? '请输入代表名称' : ''"
        clearable
        :rules="[{ required: true, message: '请输入代表名称' }]"
      />
      <van-field
        v-model="query.tel"
        name="tel"
        :required="isEdit"
        label="联系号码"
        type="tel"
        :placeholder="isEdit ? '请输入联系号码' : ''"
        clearable
        :rules="[{ required: true, message: '请输入联系号码' }]"
      />
      <!-- <van-field
        v-model="query.industry"
        name="industry"
        label="行业"
        :placeholder="isEdit ? '请输入行业' : ''"
        clearable
      /> -->
      <van-field
        readonly
        :clickable="isEdit"
        name="industryText"
        v-model="query.industryText"
        label="行业"
        :placeholder="isEdit ? '请输入行业' : ''"
        @click="isEdit ? (showPicker = true) : null"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar :columns="industryList" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
      <van-field
        v-model="query.money"
        name="money"
        type="number"
        label="注册资金"
        :placeholder="isEdit ? '请输入注册资金' : ''"
        clearable
      >
        <template #extra> 万元 </template>
      </van-field>
      <van-field v-model="query.email" name="email" label="邮箱" :placeholder="isEdit ? '请输入邮箱' : ''" clearable />
      <van-field
        v-model="query.introduce"
        name="introduce"
        label="简介"
        :placeholder="isEdit ? '请输入简介' : ''"
        clearable
        rows="3"
        autosize
        maxlength="250"
        show-word-limit
        type="textarea"
      />
      <van-field
        v-model="query.memo"
        name="memo"
        label="备注"
        :placeholder="isEdit ? '请输入备注' : ''"
        clearable
        rows="2"
        autosize
        maxlength="250"
        type="textarea"
        show-word-limit
      />
      <div style="margin: 16px 0">
        <van-button block v-if="isEdit" type="info" native-type="submit" style="margin-top: 10px">提交</van-button>
      </div>
    </van-form>
    <div class="msgBox" v-if="!isEdit">
      <van-cell value="消息列表：" />
      <div class="listBox">
        <div :class="item.class" class="list" v-for="item in msgListFilter" :key="item.id">
          <div :class="item.classUser">
            <div>{{ item.name }}</div>
          </div>
          <div :class="item.classMsg">
            <div class="talk">{{ item.msg }}</div>
          </div>
        </div>
      </div>
      <div v-show="!msgListFilter.length" class="noMsg">暂无消息</div>
      <van-field
        v-model="msg"
        label-width="40px"
        rows="1"
        autosize
        label="留言"
        type="textarea"
        :placeholder="isEdit ? '请输入留言' : ''"
      >
        <template #button>
          <van-button :disabled="!msg.trim()" size="small" color="#00b0ff" @click.stop="addMsg">留言</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
// 请求接口
import { addConsulting, getConsultingDetail, getMsg, addMsg, getIndustryList } from '@/api/commercialTenant.js'
import { Notify, Dialog, Toast } from 'vant'
import { mapGetters } from 'vuex'
const TypeMap = {
  1: {
    class: 'sh',
    classUser: 'sh-user',
    classMsg: 'sh-msg',
    name: '我'
  },
  2: {
    class: 'admin',
    classUser: 'admin-user',
    classMsg: 'admin-msg',
    name: '管'
  }
}

export default {
  data() {
    return {
      // 判断是新增还是查看
      isEdit: this.$route.params.type == 'add',
      id: this.$route.params.id,
      msgList: [],
      msg: '',
      // 产业的数组和匹对对象
      industryList: [],
      industryMap: {},
      showPicker: false,
      query: {
        name: '',
        deputy: '',
        tel: '',
        industry: '',
        industryText: '',
        money: '',
        email: '',
        introduce: '',
        memo: ''
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    msgListFilter() {
      return this.msgList.map(v => {
        return {
          ...v,
          ...TypeMap[v.msgType]
        }
      })
    }
  },
  mounted() {
    if (!this.isEdit) {
      this.initData()
    } else {
      // 获取产业列表
      this.getIndustryList()
    }
  },
  methods: {
    // 提交
    async onSubmit(values) {
      let toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '正在提交'
      })
      try {
        const { msg } = await addConsulting(this.query)
        Dialog.alert({
          message: msg
        })
        this.isEdit = false
        // 新增成功后返回
        this.$router.go(-1)
      } finally {
        toast.clear()
      }
    },
    // 编辑资料
    goEdit() {
      if (this.isEdit) {
        this.query = { ...this.query, ...this.queryCopy }
      }
      this.isEdit = !this.isEdit
    },
    // 加载产业信息
    getIndustryList() {
      getIndustryList().then(res => {
        this.industryList = res.data.map(v => {
          this.industryMap[v.dictValue] = v.dictLabel
          return { text: v.dictLabel, value: v.dictValue }
        })
      })
    },
    // 选择产业
    onConfirm(value) {
      this.query.industry = value.value
      this.query.industryText = value.text
      this.showPicker = false
    },
    // 加载商户数据
    initData() {
      // 加载产业信息
      this.getIndustryList()
      // 获取商户详情
      getConsultingDetail({ id: this.id }).then(res => {
        this.query = { ...this.query, ...res.data, industryText: this.industryMap[res.data.industry] }
      })
      // 获取消息列表
      getMsg({ parentId: this.id }).then(res => {
        this.msgList = res.data
      })
    },
    // 填写留言
    addMsg() {
      addMsg({ parentId: this.id, msgType: 1, msg: this.msg }).then(res => {
        this.initData()
        this.msg = ''
      })
    }
  }
}
</script>
<style lang="scss" scope>
.msgBox {
  margin: 10px 0 20px 0;
  background: white;
}
.noMsg {
  text-align: center;
  line-height: 40px;
  font-size: 12px;
  color: #969799;
}
.listBox {
  flex-direction: column;
  display: flex;
  border-radius: 8px;
  background: white;
  .list {
    padding: 8px 16px;
  }
}
.admin {
  display: flex;
  &-user {
    flex: 0 0 40px;
    div {
      width: 30px;
      line-height: 30px;
      border-radius: 50%;
      color: #fff;
      font-size: 14px;
      background: #00b0ff;
      text-align: center;
    }
  }
  &-msg {
    flex: 1;
    .talk {
      background: #00b0ff;
      width: auto;
      padding: 6px 12px;
      word-break: break-all;
      line-height: 20px;
      display: inline-block;
      margin: 0 0 0 6px;
      border-radius: 8px;
      color: white;
      font-size: 14px;
      letter-spacing: 1px;
    }
  }
}
.sh {
  display: flex;
  flex-direction: row-reverse;
  &-user {
    flex: 0 0 40px;
    div {
      width: 30px;
      line-height: 30px;
      border-radius: 50%;
      color: #1a1a1a;
      font-size: 14px;
      background: #eceff1;
      text-align: center;
    }
  }
  &-msg {
    flex: 1;
    .talk {
      background: #eceff1;
      width: auto;
      padding: 6px 12px;
      word-break: break-all;
      line-height: 20px;
      margin: 0 6px 0 0;
      border-radius: 8px;
      color: #1a1a1a;
      font-size: 14px;
      letter-spacing: 1px;
      float: right;
    }
  }
}
</style>
